<template>
  <!-- 针对拼多多虚拟号弹窗 -->
  <div>
    <div class="pad-l-20 pad-r-20">
      <span class="font-16 font-w">隐私号可<span class="font-orange">用于发货/联系卖家</span>，与真实手机号用法一致</span>
      <div class="flex-col">
        <span class="title-dot mar-t-10">直接联系买家</span>
        <span class="font-color-9 mar-l-12">直接拨打隐私号，听到语音提示<span class="font-orange">输入姓名/地址后的4位分机号</span></span>
      </div>
      <div class="flex-col">
        <span class="title-dot mar-t-10">直接发货</span>
        <span class="font-color-9 mar-l-12">请务必复制完整的收件人信息<span class="font-orange">[含中括号及4位数字]</span>，示例：</span>
        <div class="flex-col mar-l-12">
          <span>收件人：张三<span class="font-orange">[2984]</span></span>
          <span>手机号: 18700000000</span>
          <span>收件地址：北京市朝阳区百子湾路000号</span>
        </div>
      </div>
      <div class="flex-col">
        <span class="title-dot mar-t-10">短信实时转发</span>
        <span class="font-color-9 mar-l-12">物流派送后，取件提醒短信会实时转发至买家真实手机号</span>
      </div>
      <div class="flex-col">
        <span class="title-dot mar-t-10">买家可查看取件提醒</span>
        <span class="font-color-9 mar-l-12 mar-b-10">用隐私号发货的包裹，买家可在拼多多APP中订单物流详情页查看取件信息示例如下：</span>
        <img :src="remark">
      </div>
      <div v-if="virtualNumber.length == 16">
        <div style="border-top:1px dashed #999;margin-top:10px"/>
        <div>
          <p class="font-color-9">若需查看真实手机号，您可
            <el-button type="text" @click="dialogViewPhone = true">报备查看真实手机号</el-button>
          </p>
        </div>
      </div>
    </div>

    <!-- 报备查看真实手机号弹窗 -->
    <el-dialog title="查看真实手机号" :visible.sync="dialogViewPhone" width="30%" append-to-body>
      <div v-loading="loading">
        <div class="pad-12">
          <div>
            <div style="border: 1px solid #FFDF9B;background:#FFF7DD" class="flex pad-4">
              <div class="mar-r-4">
                <i class="el-icon-warning font-orange"></i>
              </div>
              <div>
                <span>如需查看真实手机号，请如实根据实际情况选择查看用途。如与实际情况不符将会影响后续查看</span>
              </div>
            </div>
            <div class="mar-t-12">
              <span>请选择查看用途</span>
              <div>
                <el-radio v-model="value" label="1">使用非拼多多电子面单发货</el-radio>
                <el-radio v-model="value" label="2">需要第三方代发</el-radio>
                <el-radio v-model="value" label="3">需要线下手动发货</el-radio>
              </div>
            </div>
            <div v-if="value == 1" style="background:#E5F3FF" class="mar-t-12 pad-12">
              <span style="color:#3FA6FF">推荐使用【拼多多-电子面单】</span>
              <div class="flex-col mar-t-10">
                <span class="mar-b-4">专项权益：</span>
                <span>1.防恶意退款 </span>
                <span>2.活动报名优先审批</span>
                <span>3.虚假发货流量免罚</span>
                <span>4.获得额外提现次数</span>
              </div>
            </div>
            <div v-if="value == 2" style="background:#E5F3FF" class="mar-t-12 pad-12">
              <span style="color:#3FA6FF">推荐使用【拼多多-代发管理】</span>
              <div class="flex-col mar-t-10">
                <span class="mar-b-4">专项权益：</span>
                <span>1.发货效率大幅提升</span>
                <span>2.信息同步减少资损</span>
                <span>3.电子面单特权加护</span>
                <span>4.厂家代发商家的必备工具</span>
              </div>
            </div>
            <div v-if="value == 3" style="background:#E5F3FF" class="mar-t-12 pad-12">
              <span style="color:#3FA6FF">推荐使用【拼多多-在线下单】</span>
              <div class="flex-col mar-t-10">
                <span class="mar-b-4">专项权益：</span>
                <span>1.一键呼叫快递员上门寄件</span>
                <span>2.免开通电子面单账户、无需购买打印机</span>
                <span>3.及时揽收，发货无忧</span>
                <span>4.快递自由选择，按线路、单量报价</span>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer mar-b-5">
          <el-button type="primary">
            <a v-if="value == 1" :href="'https://fuwu.pinduoduo.com/redirect/columbine/isv/decrypt/report?type=0&clientId=' + getEnterpriseConfig().pinDuoDuoKey" target="_blank">
              去使用电子面单
            </a>
            <a v-if="value == 2" :href="'https://fuwu.pinduoduo.com/redirect/columbine/isv/decrypt/report?type=1&clientId=' + getEnterpriseConfig().pinDuoDuoKey" target="_blank">
              去使用代发工具
            </a>
            <a v-if="value == 3" :href="'https://fuwu.pinduoduo.com/redirect/columbine/isv/decrypt/report?type=2&clientId=' + getEnterpriseConfig().pinDuoDuoKey" target="_blank">
              去一键呼叫小件员
            </a>
          </el-button>
          <el-button style="margin-left: 80px" @click="doDecrypt">继续查看</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 真实信息 -->
    <el-dialog title="真实信息" :visible.sync="viewRealVisible" width="30%" append-to-body>
      <div class="pad-12">
        <el-form label-width="120px">
          <el-form-item label="收件人姓名：">
            <div>{{ decryptInfo.receiverName }}</div>
          </el-form-item>
          <el-form-item label="收件人手机号：">
            <div>{{ decryptInfo.receiverPhone }}</div>
          </el-form-item>
          <el-form-item label="收件人地址：">
            <div>{{ decryptInfo.address }}</div>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import remark from '@/assets/images/remark1.png'
  import { decryptReceiveInfo } from '@/api/goods/thirdOrder'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 平台单号
      externalOrderNo: {
        type: String
      },
      // 平台类型
      platformType: {
        type: String
      },
      // 隐私号
      virtualNumber: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.value = '1'
        }
      }
    },
    data() {
      return {
        // 解密信息对象
        decryptInfo: {
          address: '',
          receiverName: '',
          receiverPhone: ''
        },
        remark,
        loading: false,
        dialogViewPhone: false,
        viewRealVisible: false,
        value: '1'
      }
    },
    methods: {
      // 解密事件
      doDecrypt() {
        this.loading = true
        decryptReceiveInfo(this.externalOrderNo, this.platformType, this.value).then(response => {
          this.loading = false
          if (response.isError) return
          this.dialogViewPhone = false
          this.viewRealVisible = true
          const data = response.data
          this.decryptInfo.receiverName = data.customerName
          this.decryptInfo.receiverPhone = data.customerPhone
          this.decryptInfo.address = data.customerAddress
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .title-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
  }
</style>

